<template>
    <div class="mycoupon">
        <div class="header">
            <div class="tabs">
                <div
                    class="tab"
                    :class="{ active: tabsIndex == null }"
                    @click="getCouponList(null)"
                >
                    默认
                    <div class="line"></div>
                </div>
                <div
                    class="tab"
                    :class="{ active: tabsIndex == 2 }"
                    @click="getCouponList(2)"
                >
                    已使用
                    <div class="line"></div>
                </div>
                <div
                    class="tab"
                    :class="{ active: tabsIndex == 3 }"
                    @click="getCouponList(3)"
                >
                    已过期
                    <div class="line"></div>
                </div>
            </div>
          
        </div>

        <div class="list">
            <div v-if="elevenShow" class="eleven-list">
                <div
                    v-for="(item, index) in couponElevenList"
                    :key="index"
                    class="item"
                >
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/uploads/20231107/true-eleven.png"
                        alt=""
                        class="eleven-img"
                    />
                    <div class="semi-circle semi-circle-top"></div>
                    <div class="semi-circle semi-circle-bottom"></div>

                    <div class="type">
                        <div class="price">¥{{ item.price }}</div>
                        <div class="old-price">原价 ¥{{ item.oldPrice }}</div>
                    </div>
                    <div class="dotted"></div>

                    <div
                        class="title"
                        :style="{ color: item.isToday ? '#FF6161' : '' }"
                    >
                        <div>
                            {{ item.type == 1 ? "普通问答券" : "专家问答券" }}
                        </div>
                        双十一年度钜惠
                    </div>
                    <div class="but-img">
                        <div class="button" @click.stop="buyCoupon(index)">
                            去购买
                        </div>
                        <div class="son-text">
                            买<span class="son-price">5</span>赠<span
                                class="son-price"
                                >5</span
                            >
                        </div>
                    </div>
                </div>
            </div>

            <div class="coupon-list">
                <div
                    v-for="(item, index) in couponList"
                    :key="index"
                    class="item"
                >
                    <div class="semi-circle semi-circle-top"></div>
                    <div class="semi-circle semi-circle-bottom"></div>

                    <div
                        class="type"
                        :style="{ color: item.status != 1 ? '#999999' : '' }"
                        :class="{ type0: item.status != 1 }"
                    >
                        <div
                            :style="{
                                color: item.status != 1 ? '#999999' : '',
                            }"
                        >
                            ￥{{ item.voucher_reduce }}
                        </div>
                        企服代金券
                    </div>
                    <div class="dotted"></div>

                    <div class="title" >
                        <div :style="{ color: item.status == 1 ? '#333333' : '' }">
                            {{ item.voucher_name }}
                        </div>
                        <div
                            :style="{ color: item.status == 1 ? '#666666' : '' }"
                            style="
                                font-size: 16px;
                                font-weight: 500;
                            "
                        >
                            {{ item.voucher_rule }}
                        </div>
                        有效期至：{{ item.endtime_text.substring(0, 10) }}
                    </div>
                    <div class="but-img">
                        <div
                            v-if="item.status == 1"
                            class="button"
                            @click="goAsk()"
                        >
                            去使用
                        </div>
                        <img
                            v-if="item.status == 2"
                            src="~/assets/images/userCenter/coupon-type.png"
                            alt=""
                        />
                        <img
                            v-if="item.status == 3"
                            src="~/assets/images/userCenter/coupon-type-expire.png"
                            alt=""
                        />
                    </div>
                </div>
                <el-empty
                    v-if="couponList.length == 0"
                    description="空空如也"
                ></el-empty>
            </div>
        </div>
        <!-- 充值弹窗 -->
        <div class="vipPay">
            <el-dialog :visible.sync="paymentShow" width="40%">
                <div class="vip-title fz20 c333">优惠卷购买</div>
                <div class="flex-around">
                    <div
                        class="vip-item"
                        v-for="(item, index) in couponElevenList"
                        :key="index"
                        :class="{ active: vipPackageIndex == index }"
                        @click="selectPackage(index)"
                    >
                        <div class="name">{{ item.name }}</div>
                        <div class="money fz16 mt10">
                            ￥<span class="fz30">{{ item.price }}</span>
                        </div>
                        <div
                            v-if="tabsIndex != 2"
                            class="old-money fz16 c999 mt10"
                        >
                            原价：￥{{ item.oldPrice }}
                        </div>
                        <div class="imgHot" v-if="vipPackageIndex == index">
                            <img
                                src="~/assets/images/userCenter/hot.png"
                                alt=""
                                class="img100"
                            />
                        </div>
                    </div>
                </div>

                <div class="flex">
                    <div
                        class="payment flex-center-align pointer"
                        :class="{
                            paymentCurrent: select_pay_type == item.pay_type,
                        }"
                        v-for="(item, index) in paymentList"
                        :key="index"
                        @click="select_pay_type = item.pay_type"
                    >
                        <img
                            src="~/assets/images/service/pay_check1.png"
                            class="selectIcon"
                            v-if="select_pay_type == item.pay_type"
                        />
                        <img
                            src="~/assets/images/service/pay_check0.png"
                            class="selectIcon"
                            v-if="select_pay_type != item.pay_type"
                        />
                        <img :src="item.icon" class="icon" alt="" />

                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="mt60 mb20">
                    <el-checkbox v-model="agree" true-label="1" false-label="0">
                        <span class="agree">
                            我已同意
                            <span @click.stop="goPayXieyi()" class="c1C8 fz14"
                                >《支付协议》</span
                            >
                        </span>
                    </el-checkbox>
                </div>
                <span class="btn" @click="submit">立即充值</span>
            </el-dialog>
        </div>
        <div v-html="payHtml"></div>
        <!-- 微信支付弹窗 -->
        <div class="wxPay">
            <el-dialog :visible.sync="wxPayShow" width="370px">
                <div class="ErwmToast">
                    <div class="erwm">
                        <iframe
                            class="iframe mt20"
                            :src="iframeSrc"
                            name="newPage"
                        />
                    </div>
                    <div class="flex-center-align mt20">
                        <img
                            src="~/assets/images/service/icon_pay1.png"
                            class="icon"
                            alt=""
                        />
                        <div class="fz22 c333">微信支付</div>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

import {
    serviceVoucherList,
    payCoupon,
    payCouponDetail,
} from "@/assets/api/userCenterApi";
import { goTopSmooth } from "@/assets/utils/utils";
import { getElevenOpen } from "@/assets/api/indexApi";

export default {
    name: "mycoupon",
    metaInfo() {
        return {
            title: "个人中心-会员",
            meta: [{ name: "keywords", content: "小竹,财税,小竹财税" }],
        };
    },
    data() {
        return {
            rule: "",
            tabsIndex: 0,
            couponList: [],
            elevenShow: false,
            couponElevenList: [
                {
                    type: 1,
                    price: 11.11,
                    oldPrice: 50,
                    name: "普通问答券",
                },
                {
                    type: 2,
                    price: 22.22,
                    oldPrice: 99,
                    name: "专家问答券",
                },
            ],
            paymentShow: false,
            select_pay_type: 1, //选择支付宝还是微信支付
            agree: "",
            payHtml: "", //支付宝支付
            iframeSrc: "", //微信二维码地址
            wxPayShow: false,
            vipPackageIndex: 0,
            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        goTopSmooth();
        this.getCouponList(null);
        this.getElevenDiscount();
    },
    methods: {
        async getCouponList(status) {
            this.tabsIndex = status;
            let params = {};
            if (status) params.status = status;
            const res = await serviceVoucherList(params);
            if (res.code == 1) {
                // this.rule = res.data.rule;

                for (let item of res.data) {
                    let a = item.endtime * 1000 - new Date().getTime();
                    let isToday = a > 0 && a < 24 * 3600 * 1000; //相差在0~一天内
                    item.isToday = isToday;
                }
                this.couponList = res.data;
            }
        },

        //是否开启双十一活动
        async getElevenDiscount() {
            const res = await getElevenOpen();
            if (res.code === 1) {
                if (res.data.is_showindexactive == 1) {
                    this.elevenShow = true;
                }
            }
        },

        buyCoupon(index) {
            this.paymentShow = true;
            this.vipPackageIndex = index;
        },
        submit() {
            if (this.agree == "") {
                this.$message("请勾选下方协议");
                return;
            } else {
                this.payVip();
            }
        },
        async payVip() {
            var params = {
                type: this.couponElevenList[this.vipPackageIndex].type,
                price: 0.01,
                source: "web",
                pay_type: this.select_pay_type,
            };
            const res = await payCoupon(params);
            if (res.code == 1) {
                if (this.select_pay_type == 1) {
                    this.payHtml = res.data;
                    this.$nextTick(() => {
                        document.forms[0].submit();
                    });
                } else {
                    this.wxPayShow = true;
                    this.iframeSrc = res.data;
                    this.orderNo = res.msg;
                    this.getWxPayType();
                }
            }
        },
        async getWxPayType() {
            let res = await payCouponDetail({ order_no: this.orderNo });
            if (res.code == 1) {
                if (res.data.status == 2) {
                    this.wxPayShow = false;
                    this.iframeSrc = "";
                    this.getCouponList();
                    if (this.$route.query.is_back == 1) {
                        this.$router.go(-1);
                    }
                } else {
                    setTimeout(() => {
                        this.getWxPayType();
                    }, 2000);
                }
            }
        },
        goPayXieyi() {
            window.open("https://api.xiaozhucaishui.com/xieyi/pay.html");
        },
        selectPackage(index) {
            this.vipPackageIndex = index;
        },

        goAsk() {
            this.$router.push({
                path: "/service/servicesearch?keyword=",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.mycoupon {
    margin-left: 20px;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    height: 80px;
    padding: 0 25px;
    background: #fff;
}

.tabs {
    display: flex;
    align-items: center;
    .tab {
        height: 80px;
        line-height: 80px;
        position: relative;
        margin: 0 25px;
        font-size: 20px;
        color: #333333;
        cursor: pointer;
        &:hover {
            opacity: 0.9;
        }
        .line {
            display: none;
            width: 35px;
            height: 2px;
            background: #1c87f3;
            border-radius: 2px;
            position: absolute;
            bottom: 0;
            left: calc(50% - 35px / 2);
        }
    }
    .active {
        color: #1c87f3;
        .line {
            display: block;
        }
    }
}
.tip {
    font-size: 14px;
    color: #666666;
    text-align: center;
    line-height: 34px;
    width: 83px;
    height: 34px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #878787;
    cursor: pointer;
}
.tip-content {
    font-size: 14px;
    color: #333333;
    line-height: 29px;
}

.list {
    width: 100%;
    padding: 50px;
    background-color: #ffffff;
}

.coupon-list {
    .item {
        width: 615px;
        height: 118px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        position: relative;
        margin-bottom: 27px;
        display: flex;
        align-items: center;
        &:hover {
            border-color: #ff6161;
            .semi-circle {
                border-color: #ff6161;
            }
            .dotted {
                border-color: #ff6161;
            }
        }
        .semi-circle {
            width: 26px;
            height: 13px;
            background: #ffffff;
            border: 1px solid #d8d8d8;
            left: 120px;
        }
        .semi-circle-top {
            border-radius: 0 0 13px 13px;
            border-top: 0;
            position: absolute;
            top: -1px;
        }
        .semi-circle-bottom {
            border-radius: 13px 13px 0 0;
            border-bottom: 0;
            position: absolute;
            bottom: -1px;
        }
        .type {
            width: 133px;
            font-size: 16px;
            font-weight: 500;
            color: #ff6161;
            text-align: center;
            div {
                font-size: 20px;
                font-weight: 700;
                color: #ff6161;
                padding-bottom: 5px;
            }
        }
        .type0 {
            color: #d1d1d1;
            div {
                color: #d1d1d1;
            }
        }
        .title {
            width: 328px;
            padding-left: 50px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            div {
                font-size: 20px;
                font-weight: 700;
                padding-bottom: 5px;
            }
        }
        .but-img {
            width: 100px;
            text-align: center;
            .button {
                width: 100px;
                height: 40px;
                // background: #ff6161;
                border: 1px solid #ff6161;
                border-radius: 55px;
                cursor: pointer;
                text-align: center;
                line-height: 38px;
                font-size: 16px;
                font-weight: 500;
                color: #ff6161;
                &:active {
                    opacity: 0.9;
                }
                &:hover {
                    opacity: 0.8;
                }
            }
            img {
                width: 73px;
                height: 73px;
            }
        }
        .dotted {
            width: 0px;
            height: 60px;
            border-left: 1px dotted #d8d8d8;
        }
    }
}

.eleven-list {
    .item {
        width: 615px;
        height: 118px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        position: relative;
        margin-bottom: 27px;
        display: flex;
        align-items: center;
        &:hover {
            border-color: #ff6161;
            .semi-circle {
                border-color: #ff6161;
            }
            .dotted {
                border-color: #ff6161;
            }
        }
        .semi-circle {
            width: 26px;
            height: 13px;
            background: #ffffff;
            border: 1px solid #d8d8d8;
            left: 120px;
        }
        .semi-circle-top {
            border-radius: 0 0 13px 13px;
            border-top: 0;
            position: absolute;
            top: -1px;
        }
        .semi-circle-bottom {
            border-radius: 13px 13px 0 0;
            border-bottom: 0;
            position: absolute;
            bottom: -1px;
        }
        .eleven-img {
            width: 50px;
            height: 23px;
            position: absolute;
            top: -1px;
        }
        .type {
            width: 133px;
            font-size: 16px;
            font-weight: 500;
            color: #ff6161;
            text-align: center;
            .price {
                font-size: 20px;
                font-weight: 700;
                color: #ff6161;
                padding-bottom: 5px;
            }
            .old-price {
                color: #999999;
                text-decoration: line-through;
            }
        }
        .type0 {
            color: #d1d1d1;
            div {
                color: #d1d1d1;
            }
        }
        .title {
            width: 328px;
            padding-left: 50px;
            font-size: 16px;
            font-weight: 500;
            color: #b3b3b3;
            div {
                font-size: 20px;
                font-weight: 700;
                color: #333333;
                padding-bottom: 5px;
            }
        }
        .but-img {
            width: 100px;
            text-align: center;
            .button {
                width: 100px;
                height: 40px;
                background: #ff6161;
                border-radius: 55px;
                cursor: pointer;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                font-weight: 500;
                color: #f4f8fb;
                &:active {
                    opacity: 0.9;
                }
                &:hover {
                    opacity: 0.8;
                }
            }
            .son-text {
                margin-top: 8px;
                color: #666;
                .son-price {
                    color: #ff6161;
                }
            }
        }
        .dotted {
            width: 0px;
            height: 60px;
            border-left: 1px dotted #d8d8d8;
        }
    }
}

.vipPay {
    .vip-title {
        text-align: center;
        margin-bottom: 40px;
    }
    .vip-item {
        position: relative;
        text-align: center;
        padding: 30px 10px;
        margin-right: 20px;
        width: 171px;
        height: 175px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #a5a5a5;
        cursor: pointer;
        &:last-child {
            margin-right: 0 !important;
        }

        &.active {
            background: #fff2df;
            border: 1px solid #ff861b !important;

            .money {
                color: #ff502f;
            }
        }

        .name {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
        }
        .money {
            color: #4b68ba;
        }
        .old-money {
            text-decoration: line-through;
        }
        .imgHot {
            position: absolute;
            top: -20px;
            left: 0;
            width: 64px;
            height: 26px;
        }
    }

    .payment {
        margin-top: 65px;
        margin-right: 20px;
        padding: 0 30px;
        width: 210px;
        height: 68px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #ececec;
        font-size: 18px;

        &.paymentCurrent {
            box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
        }

        .selectIcon {
            width: 25px;
            height: 25px;
        }

        .icon {
            margin: 0 10px;
            width: 40px;
            height: 40px;
        }
    }

    .btn {
        position: absolute;
        bottom: 30px;
        right: 40px;
        display: inline-block;
        text-align: center;
        width: 140px;
        height: 42px;
        line-height: 42px;
        background: #1c87f3;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
    }
}
.wxPay ::v-deep .el-dialog__body {
    padding: 30px 0 !important;
}

.ErwmToast {
    text-align: center;

    .erwm {
        display: flex;
        align-items: center;
        justify-content: center;

        .iframe {
            width: 333px;
            height: 333px;
            border-width: 0;
        }
    }

    .icon {
        margin-right: 5px;
        width: 30px;
        height: 30px;
    }
}
</style>./myvoucher.vue
